<template>
	<view class="demo-title">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :isBack="isBack" :bottomShadow="bottomShadow" backgroundColor="#FFFFFF00">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<!-- 标题名称 -->
				<view class="tn-text-left tn-padding-left" style="width: 100vw">
					<text class="tn-text-bold tn-text-lg">{{ title }}</text>
				</view>
			</view>
		</tn-nav-bar>
		<view class="" :style="{ paddingTop: vuex_custom_bar_height + 'px' }" />
	</view>
</template>

<script>
/**
 * 顶部自定义导航组件
 *
 * 该组件用于渲染页面的顶部导航栏，可以自定义是否显示返回按钮以及底部阴影。
 *
 * @component
 * @property {Boolean} isBack - 是否显示返回按钮，默认为 `false`。如果设置为 `true`，则会显示返回按钮，通常用于需要返回功能的页面。
 * @property {Boolean} bottomShadow - 是否显示底部阴影，默认为 `false`。
 * @property {String} title - 标题名称。
 *
 * @example
 * <dr-custom-nav :isBack="true" :bottomShadow="true" />
 *
 * 这个组件可以根据需要调整样式和功能，适用于各种页面的顶部导航需求。
 */
export default {
	name: "custom-nav",
	options: {
		// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
		virtualHost: true,
	},
	props: {
		// 是否显示返回按钮
		isBack: {
			type: Boolean,
			default: false,
		},
		// 导航栏阴影
		bottomShadow: {
			type: Boolean,
			default: false,
		},
		// 标题名称
		title: {
			type: String,
			default: "",
		},
	},
};
</script>

<style lang="scss" scoped></style>
